<!-- 公告详情 -->

<template>
    <div class="announment-details-page">
        <h1 class="title">太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目</h1>
        <div class="info">
            <span>发布企业：&nbsp;&nbsp;太原市迎泽区卫生局卫生监督所</span>
            <span>发布时间：&nbsp;&nbsp;2023年04月13日</span>
        </div>
        <div class="content">
            <span>为便于供应商及时了解政府<span class="red-span">采购信息</span>，根据《(略)关于开展<span class="red-span">政府采购意向</span>公开工作的通知》(财库〔2020〕(略))等有关规定，现将<span class="red-span">太原</span>市(略)(略)<span class="red-span">2023年4月至12月</span>采购<span class="red-span">意向</span>公开如下：</span>
            <table class="table" rules="all">
                <thead class="table-header">
                    <tr>
                        <th v-for="(item,index) in tableHeader" :key="index">
                            <span v-html="item"></span>
                        </th>
                    </tr>
                </thead>
                <tbody class="table-body">
                    <tr v-for="(item,index) in tableData" :key="index">
                        <td v-for="(col,index) in item" :key="index">
                            <span v-html="col"></span>
                        </td>
                    </tr>
                </tbody>
            </table>
            <span>本次公开的采购<span class="red-span">意向</span>是本单位<span class="red-span">政府采购</span>工作的初步安排，具体采购<span class="red-span">项目</span>情况以相关采购公告和采购文件为准。</span>
            <div class="content-center">
                <span><span class="red-span">太原</span>市（略）（略）</span>
            </div>
            <div class="content-bottom">
                <span>温馨提示：本招标<span class="red-span">项目</span>仅供付费会员查阅，您的权限不能浏览详细信息，联系工作人员办理会员入网事宜，成为正式会员后方可获取详细的招标公告、报名表格、<span class="red-span">项目</span>附件及部分<span class="red-span">项目</span>招标文件等。</span>
                <br>
                <span>联系人：郝工</span>
                <br>
                <span>电话：010-68960698</span>
                <br>
                <span>邮箱：1049263697@q9.com</span>
            </div>
            <div class="annex">
                <span><img src="@/assets/images/u251.png" alt="">附件：</span>
                <span class="link cursor-pointer" @click="handleAnnex"><img src="@/assets/images/u252.png" alt="">&nbsp;太原市迎泽区卫生局卫生临督所2023年4日至12月政府采购意向-公用经费项目附件</span>
            </div>
        </div>
    </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
export default {
    setup() {
        const data = reactive({
            tableHeader: [
                '序号',
                '采购<span style="color: rgb(216, 113, 102);">项目</span>名称',
                '采购需求椒况',
                '预算金额（元）',
                '预计采购时间（填写到<span style="color: rgb(216, 113, 102);">月</span>）',
                '是香专门面向中小企业采购',
                '备注'
            ],
            tableData: [
                [
                    1,
                    '<span style="color: rgb(216, 113, 102);">公用经费项目</span>',
                    '公车维修',
                    '***',
                    '<span style="color: rgb(216, 113, 102);">2023年12月</span>',
                    '是',
                    '车辆运行维护费'
                ]
            ]
        })
        // 下载附件
        function handleAnnex() {
            alert('下载附件')
        }
        return {
            ...toRefs(data),
            handleAnnex
        }
    }
}
</script>
<style scoped>
    .announment-details-page {
        height: calc(100% - 80px) ;
        background: #fff;
        border-radius: 10px;
        padding: 30px 20px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .title {
        font-size: 25px;
    }
    .info {
        font-size: 15px;
        color: #777;
        margin: 15px 0 30px 0;
    }
    .info>span:first-of-type {
        margin-right: 35px;
    }
    .content {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .content span {
        font-size: 12px;
    }
    .red-span {
        color: rgb(216, 113, 102);
    }
    .table {
        display: inline-block;
        border-collapse: collapse;
        margin: 10px 0;
    }
    .table-header {
        font-size: 12px;
        background: #dedede;
    }
    .table-header th {
        height: 40px;
        padding: 0 5px;
    }
    .table-body {
        font-size: 13px;
    }
    .table-body td {
        height: 40px;
        padding: 0 5px;
    }
    .content-center {
        flex: 1;
        display: flex;
        flex: content;
        align-items: center;
    }
    .annex {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: center;
    }
    .annex span {
        font-size: 15px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .link {
        color: #999;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .annex img {
        width: 18px;
        height: 18px;
    }
</style>